<template>
  <div class="container mx-auto" v-if="injectWidgetId === id">
    <el-form ref="formRef" :model="formData" :key="id" label-position="top">
      <el-form-item label="字段名" prop="fieldLabel">
        <el-input v-model="formData.fieldLabel" placeholder="字段名" @input="handleValueChange" />
      </el-form-item>
      <el-form-item label="字段值" prop="fieldName">
        <el-input v-model="formData.fieldName" placeholder="字段值" @input="handleValueChange" />
      </el-form-item>
      <el-form-item label="是否可搜索" prop="canSearch">
        <el-switch
          v-model="formData.canSearch"
          active-text="是"
          inactive-text="否"
          :active-value="true"
          :inactive-value="false"
          @change="handleValueChange"
        ></el-switch>
      </el-form-item>
      <el-form-item label="表单类型" prop="fieldType">
        <el-radio-group v-model="formData.fieldType" @change="handleValueChange">
          <el-radio value="input">输入框</el-radio>
          <el-radio value="select">下拉框</el-radio>
          <el-radio value="dict">字典</el-radio>
          <el-radio value="source">数据源</el-radio>
          <el-radio value="date">日期</el-radio>
          <el-radio value="textarea">文本框</el-radio>
          <el-radio value="file">附件</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.fieldType == 'select'" label="键值" prop="options">
        <el-input
          v-model="formData.options"
          type="textarea"
          placeholder="如：'选项一:1,选项二:2..."
          @input="handleValueChange"
        />
      </el-form-item>
      <el-form-item v-if="formData.fieldType == 'dict'" label="字典码" prop="dictCode">
        <el-input v-model="formData.dictCode" placeholder="请输入" @input="handleValueChange" />
      </el-form-item>
      <el-form-item label="字符长度" prop="charLength">
        <el-input v-model="formData.charLength" placeholder="请输入" @input="handleValueChange" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup name="OproFieldConfig">
import { ref, reactive, inject, watch } from 'vue'
import { ElForm } from 'element-plus'
import cloneDeep from 'lodash/cloneDeep'

const props = defineProps({
  id: {
    type: String,
  },
  widget: {
    type: Object,
  },
})
const emits = defineEmits(['change'])

const injectWidgetId = ref(inject<String>('activeWidgetId'))

interface FormData {
  fieldLabel: string
  fieldName: string
  checked: boolean
  canSearch: boolean
  fieldType: string
  charLength: number
  options?: string
  dictCode?: string
}

const formRef = ref<InstanceType<typeof ElForm>>()
const formData = reactive<FormData>({
  fieldLabel: props.widget?.props.fieldLabel || '',
  fieldName: props.widget?.props.fieldName || '',
  checked: props.widget?.props.checked || true,
  canSearch: props.widget?.props.canSearch || false,
  fieldType: props.widget?.props.fieldType || 'input',
  charLength: props.widget?.props.charLength || 50,
  options: '',
  dictCode: '',
})

function handleValueChange() {
  emits('change', cloneDeep(formData))
}
</script>

<style scoped>
.container {
  max-width: 600px;
}
</style>
